<template>
  <view>
    <view class="content">
      <view v-if="state" class="title">服务费用</view>
      <view v-else class="title">
        <view class="">配件使用</view>
        <view class="lie">配件列表</view>
      </view>

      <view class="" v-if="state">
        <view class="item">
          <view class="">维修员</view>
          <view class="">{{ record.faultTypeName }}</view>
        </view>
        <view class="serveAmount">
          <view class="">服务费</view>
          <view class="">￥{{ record.serveAmount }}</view>
        </view>
      </view>
    </view>
    <u-button class="custom-style" type="primary" size="normal" text="支付确认" @click="payConfirm"></u-button>
  </view>
</template>
<script>
import { updateOrderStatusAPI } from '@/api/authenticationApi.js';
import { getorderPartAPI } from '@/api/equipment.js';
import config from '@/config.js';
export default {
  data() {
    return {
      state: true,
      orderId: '',
      record: {}
    };
  },

  methods: {
    async init() {
      // const res = await getorderPartAPI(this.orderId);
      // console.log(res);
    },
    payConfirm() {
      console.log('>>>>>>>>>>');
      this.updateOrderStatus();
    },
    async updateOrderStatus() {
      let _this = this;
      try {
        const res = await updateOrderStatusAPI(this.orderId);
        console.log('---', res);
        uni.showToast({
          title: '支付成功！',
          icon: 'success',
          success: function() {
            uni.navigateTo({
              url: '/pages/order-list/order-list?num=1'
            });
          }
        });
      } catch (e) {
        //TODO handle the exception
      }
    }
    // getOrderPart(id,num){
    //   uni.request({
    //     url:`${config.baseURL}/orderPart/get/${id}/page/${num}`,
    //     success(res) {
    //       console.log(res);
    //     }
    //   })
    // },
    // getOrderPart() {
    //   let that = this;
    //   console.log('--------', this.orderId);
    //   uni.request({
    //     url: `${config.baseURL}/orderPart/get/${that.orderId}/page/1`,
    //     success(res) {
    //       console.log(res.data.data, 'resssssssss');
    //       // that.Part = res.data.data;
    //       // console.log('====', that.Part.records);
    //       // that.priceArray = that.Part.records.map(i => {
    //       //   return {
    //       //     price: i.amount * i.part.price,
    //       //     name: i.part.name
    //       //   };
    //       // });
    //       // that.allPrice = that.priceArray.reduce((sum, i) => {
    //       //   return sum + i.price;
    //       // }, 0);

    //       // }
    //     }
    //   });
    // },
  },
  onLoad() {
    uni.$on('order', data => {
      console.log('监听到事件来自 update ，携带参数 msg 为：', JSON.parse(data));
      this.record = JSON.parse(data);
      this.orderId = JSON.parse(data).id;

      console.log('id', this.orderId);
      this.init();
      // this.init(this.orderId,1)
    });
  }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}
.custom-style {
  width: 95%;
  margin-top: 20px;
  border-radius: 30rpx;
  background: #ffb612;
  border: none;
}
.content {
  background: rgb(79, 79, 79);
  margin: 10px 5px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;
  border-left: 4rpx solid #ffb612;
  border-right: 4rpx solid #ffb612;
  padding: 10px;
  .title {
    color: #ffb612;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ffb612;
    padding: 10px 0;
    .lie {
      color: rgb(205, 205, 205);
      padding: 10px;
      font-size: 15px;
    }
  }
  .item {
    color: rgb(205, 205, 205);
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .serveAmount {
    color: #ffb612;
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
}
</style>
